Day 2：HTML5 語意化標籤與最佳實踐

2025 iThome 鐵人賽

DAY 2

Modern Web

Modern Web：從基礎、框架到前端學習系列第 2 篇

17th鐵人賽

zoeeyee

2025-09-16 22:24:35

21 瀏覽

分享至

前言

在昨天的文章中，我們聊了「為什麼要學現代前端」。今天要開始進入基礎：HTML5 語意化標籤。雖然很多人覺得 HTML 很簡單，但其實寫得好不好，會直接影響到SEO、可維護性、與可及性 (Accessibility)。

什麼是語意化標籤？

語意化 (Semantic) 的意思，就是「讓標籤的名稱本身就表達內容的意義」。
例如：

<header> → 頁首，通常放導覽列或標題
<main> → 網站的主要內容
<article> → 一篇文章內容
<section> → 區塊，常用於文章段落或功能區分
<footer> → 頁尾

相比之下，傳統的 <div> 和 <span> 並沒有語意，純粹只是容器。

常見 HTML5 語意化標籤

<header>→放網站標題、LOGO、導覽列
<nav>→網站導航區域
<main>→網站主要內容（整頁只應該有一個）
<article>→一篇完整、獨立的內容（例如一篇 blog）
<section>→內容區塊（同主題的小段落）
<aside>→側邊補充資訊（例如廣告或推薦文章）
<footer>→頁尾，常放聯絡資訊或版權宣告

範例程式碼

<!DOCTYPE html>
<html lang="zh-Hant">
<head>
  <meta charset="UTF-8">
  <title>HTML5 語意化範例</title>
</head>
<body>
  <header>
    <h1>我的部落格</h1>
    <nav>
      <ul>
        <li><a href="#">首頁</a></li>
        <li><a href="#">文章</a></li>
        <li><a href="#">關於我</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <article>
      <header>
        <h2>第一篇文章標題</h2>
        <p>作者：Rou-Yu | 日期：2025-09-16</p>
      </header>
      <section>
        <h3>前言</h3>
        <p>這是文章的前言段落。</p>
      </section>
      <section>
        <h3>內容</h3>
        <p>這是文章的主要內容。</p>
      </section>
      <footer>
        <p>分類：前端教學</p>
      </footer>
    </article>
  </main>

  <aside>
    <h3>相關文章</h3>
    <ul>
      <li><a href="#">HTML5 基礎</a></li>
      <li><a href="#">CSS 入門</a></li>
    </ul>
  </aside>

  <footer>
    <p>© 2025 我的部落格 All rights reserved.</p>
  </footer>
</body>
</html>

為什麼要用語意化標籤？

對 SEO 友好：搜尋引擎能更清楚理解內容結構。
對開發者友好：結構清楚，維護更容易。
對使用者友好：支援螢幕閱讀器 (Screen Reader)，讓視障者也能理解內容。
避免 div soup：比起滿滿的 <div>，語意化標籤更直覺。

最佳實踐 (Best Practices)

✅ 頁面應該只使用一個 <main>。
✅ <header> 與 <footer> 可以在頁面或 <article> 內重複出現。
✅ <section> 應有標題（通常 <h2> 或 <h3>）。
✅ <article> 適合獨立成篇的內容，而不是隨便一個段落。
✅ 如果只是單純排版容器，用 <div> 就好，不要硬套語意化標籤。